<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>推荐博客</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <style>
	.aui-list-view .aui-list-view-cell:after {left: 0;}
	.info {
		overflow: hidden;
		padding-top: 5px;
		font-size: 0.8em;
	}
	#more{
		margin-top: 0px;
		padding-bottom: 15px;
		text-align: center;
	}
	.aui-list-view {
		margin-bottom: 10px;
	}
    </style>
</head>
<body>
    <div class="aui-content">
        <ul class="aui-list-view" id="list">
            <!--li class="aui-list-view-cell aui-img">
                <div class="aui-img-body">
PBXProjectHelper 1.0.0 发布，操作XCode项目的工具库
                    <p class='aui-ellipsis-2'>PBXProjectHelper 是一个基于 Python 开发的，目的用于解析和操作 PBXP...</p>
                    <p class='aui-ellipsis-1'><span class="aui-text-primary">oschina1</span>　　<span class="aui-iconfont aui-icon-time"></span>2015-12-13　　<span class="aui-iconfont aui-icon-comment"></span>3</p>
                </div>
            </li-->
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/common.js" ></script>
<script type="text/javascript" src="../script/OSChinaApi.js" ></script>
<script type="text/javascript">
	var page = 0, ajaxTag = 0;
	apiready = function(){
		// 下拉刷新
		api.setRefreshHeaderInfo({
	        visible: true,
	        loadingImg: 'widget://image/ptr_pull.png',
	        bgColor: '#efeff4',
	        textColor: '#959595',
	        textDown: '下拉可刷新',
	        textUp: '松开立即刷新',
	        showTime: true
		}, function(ret, err){
		    //从服务器加载数据，完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
		    getBlogList(0);
		});
		
		// 首次加载时设置下拉刷新组件为刷新中状态
		api.refreshHeaderLoading();
		
		// Window或者Frame页面滑动到底部事件,可用于实现滚动到底部，加载更多功能
		api.addEventListener({
		    name:'scrolltobottom',
		    extra:{
		        threshold:0            //设置距离底部多少距离时触发，默认值为0，数字类型
		    }
		},function(ret,err){
		    getBlogList(page);
		});
	};
	
	/*
	 * 获取博客列表
	 * @param  integer pageIndex  	页码，第一页是从0开始的
	 */
	function getBlogList(pageIndex){
		if(ajaxTag){
			return false;
		}
	
		var listhtml = '';
		var url = OpenAPI.blog_recommend + '&pageIndex=' + pageIndex;

	    var more = $api.byId("more");
	    if(more){
	        $api.text(more, '加载中...');
	    }
		
		ajaxTag = 1;
		api.ajax({
		    url: url,
		    method: 'get',
		    timeout: 30,
		    dataType: 'text',
		    tag: ajaxTag,
		    returnAll: false,
		},function(ret,err){
			ajaxTag = 0;
		    if (ret) {
				var trans = api.require('trans');
				trans.parse({
				    data:ret
				},function(ret,err){
				    if(ret) {
						var more = $api.byId("more");
						if(more){
							 $api.remove(more);
						}
				    	for(var i=0; i<ret.oschina.blogs.blog.length; i++){
				    		listhtml += '<li class="aui-list-view-cell aui-img" tapmode>'+
				    				'<div class="aui-img-body">'+
				    				htmlspecialchars(ret.oschina.blogs.blog[i].title) +
				    				'<p class="aui-ellipsis-2">'+ htmlspecialchars(ret.oschina.blogs.blog[i].body) +'</p>'+
				    				'<p class="aui-ellipsis-1"><span class="aui-text-primary">'+ ret.oschina.blogs.blog[i].authorname +'</span>　<span class="aui-iconfont aui-icon-time"></span> '+ friendly_time(ret.oschina.blogs.blog[i].pubDate) +'　<span class="aui-iconfont aui-icon-comment"></span> '+ ret.oschina.blogs.blog[i].commentCount +'</p>'+
				    				'</div>'+
				    				'</li>';
				    	}
				    	
				        if(pageIndex == 0){
				        	$api.html($api.byId('list'), listhtml);
				        }else{
				        	$api.append($api.byId('list'), listhtml);
				        }
				        page += 1;
				        $api.after($api.byId('list'), '<p id="more" tapmode onclick="getBlogList('+page+')">点击加载更多</p>');
				    }else{
					    if(more){
					        $api.text(more, '加载失败，点击重试');
					    }
				        log(err.msg);
				    }
				});
		    }else {
			    if(more){
			        $api.text(more, '加载失败，点击重试');
			    }
		        log('错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode);
		    	showAjaxErrMsg(err.code);
		    }
		    api.refreshHeaderLoadDone();
		    setInterval("api.parseTapmode()", 100);	// 等0.1秒在执行
		});
	}
</script>
</html>